<template>
  <div class="quill-editor"></div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.core.css";
// if (!window.Quill) {
//   window.Quill = require("quill/dist/quill.js");
// }
export default {
  name: "quill-editor",
  data() {
    return {
      _content: "",
      defaultModules: {
        toolbar: {
          container: [
            [{ logic: ["IF 判断", "For 循环"] }],
            ["bold", "italic", "underline", "strike"], // toggled buttons
            // [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }], // superscript/subscript
            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
            // [{ 'direction': 'rtl' }],                         // text direction
            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
            [{ header: [1, 2, false] }],
            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],
            // ['clean'],                                         // remove formatting button
            ["link", "image", "video"] // link and image, video
          ],
          handlers: {
            logic: function(value) {
              var v = '';
              if (value && value == "IF 判断") {
                v = " <%if  ()%> <%else%> <%/if%> ";
              } else if (value && value == "For 循环") {
                v = " <%for ()%> {{}} <%/for%> "
              }
              const cursorPosition = this.quill.getSelection().index;
              this.quill.insertText(cursorPosition, v);
              this.quill.setSelection(cursorPosition + v.length);
            }
          }
        }
      }
    };
  },
  props: {
    content: String,
    value: String,
    config: {
      type: Object,
      required: false,
      default() {
        return {};
      }
    }
  },
  mounted() {
    this.initialize();
  },
  beforeDestroy() {
    // 作者说了，等垃圾回收，不必显式清理
    this.quillEditor = null;
  },
  methods: {
    initialize() {
      if (this.$el) {
        let self = this;
        self.quillEditor = new Quill(
          self.$el,
          Object.assign(
            {
              modules: self.defaultModules,
              placeholder: "Insert text here ...",
              readOnly: false,
              theme: "snow",
              boundary: document.body
            },
            self.config || {}
          )
        );
        const logicPickerItems = Array.prototype.slice.call(
          document.querySelectorAll(".ql-logic .ql-picker-item")
        );

        logicPickerItems.forEach(
          item => (item.textContent = item.dataset.value)
        );

        document.querySelector(".ql-logic .ql-picker-label").innerHTML =
          "逻辑判断模板";
        // set editor content
        if (self.value || self.content) {
          self.quillEditor.pasteHTML(self.value || self.content);
        }

        // mark model as touched if editor lost focus
        self.quillEditor.on("selection-change", range => {
          if (!range) {
            self.$emit("blur", self.quillEditor);
          } else {
            self.$emit("focus", self.quillEditor);
          }
        });

        // update model if text changes
        self.quillEditor.on("text-change", (delta, oldDelta, source) => {
          let html = self.$el.children[0].innerHTML;
          const text = self.quillEditor.getText();
          if (html === "<p><br></p>") html = "";
          self._content = html;
          self.$emit("input", self._content);
          self.$emit("change", {
            editor: self.quillEditor,
            html: html,
            text: text
          });
        });

        // 广播事件
        self.$emit("ready", self.quillEditor);
      }
    }
  },
  watch: {
    content(newVal, oldVal) {
      if (this.quillEditor) {
        if (!!newVal && newVal !== this._content) {
          this._content = newVal;
          this.quillEditor.pasteHTML(newVal);
        } else if (!newVal) {
          this.quillEditor.setText("");
        }
      }
    },
    value(newVal, oldVal) {
      if (this.quillEditor) {
        if (newVal !== this._content) {
          this._content = newVal;
          this.quillEditor.pasteHTML(newVal);
        } else if (!newVal) {
          this.quillEditor.setText("");
        }
      }
    }
  }
};
</script>
<style>
.ql-container {
  height: 200px !important;
  min-height: 200px !important;
}
.ql-editor {
  height: 200px !important;
}
</style>

